<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021-04-07
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>

    <meta charset="utf-8">
    <c:import url="commons.jsp"></c:import>
    <title>俱乐部展示</title>

</head>
<body>
<div id="hero-slides">

    <div id="header">
        <div id="logo"></div>
        <div id="menu">
            <c:if test="${currentLogin!=null}">
                <li style="float: left;margin-left: 50px"><a href="tousernav.action">${currentLogin.lName}</a></li>
            </c:if>
            <div id="hamburger">
                <div class="slice"></div>
                <div class="slice"></div>
                <div class="slice"></div>
            </div>
        </div>
    </div>

    <div id="slides-cont">
        <div class="button" id="next"></div>
        <div class="button" id="prev"></div>
        <div id="slides">
<c:forEach var="inv" items="${list}">
            <div class="slide" style="background-image: url(${pd}/img/${inv.clImg}.jpg);">
                <div class="number">01</div>
                <div class="body">
                    <div class="location" ><b style="color: coral" >地址：${inv.address} </b></div>
                    <div class="headline" style="color: coral;font-size: 25px;">${inv.clName}</div>
                    <a href="toclubinfo.action?clId=${inv.clId}">
                        <div class="link">查看详情</div>
                    </a>
                </div>
            </div>
</c:forEach>
<%--            <div class="slide" style="background-image: url(${pd}/img/2.jpg);">--%>
<%--                <div class="number">02</div>--%>
<%--                <div class="body">--%>
<%--                    <div class="location">Mong Kok, Hong Kong</div>--%>
<%--                    <div class="headline">Photo by Ryan Tang</div><a href="#">--%>
<%--                    <div class="link">View on Unsplash</div></a>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="slide" style="background-image: url(${pd}/img/3.jpg);">--%>
<%--                <div class="number">03</div>--%>
<%--                <div class="body">--%>
<%--                    <div class="location">Incheon, South Korea</div>--%>
<%--                    <div class="headline">Photo by Steve Roe</div><a href="#">--%>
<%--                    <div class="link">View on Unsplash</div></a>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="slide" style="background-image: url(${pd}/img/4.jpg);">--%>
<%--                <div class="number">04</div>--%>
<%--                <div class="body">--%>
<%--                    <div class="location">Wan Chai, Hong Kong</div>--%>
<%--                    <div class="headline">Photo by Sean Foley</div><a href="#">--%>
<%--                    <div class="link">View on Unsplash</div></a>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="slide" style="background-image: url(${pd}/img/5.jpg);">--%>
<%--                <div class="number">05</div>--%>
<%--                <div class="body">--%>
<%--                    <div class="location">Shibuya-ku, Japan</div>--%>
<%--                    <div class="headline">Photo by Alex Knight</div><a href="#">--%>
<%--                    <div class="link">View on Unsplash</div></a>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="slide" style="background-image: url(${pd}/img/6.jpg);">--%>
<%--                <div class="number">06</div>--%>
<%--                <div class="body">--%>
<%--                    <div class="location">Tokyo, Japan</div>--%>
<%--                    <div class="headline">Photo by Benjamin Hung</div><a href="#">--%>
<%--                    <div class="link">View on Unsplash</div></a>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--            <div class="slide" style="background-image: url(${pd}/img/1.jpg);">--%>
<%--                <div class="number">07</div>--%>
<%--                <div class="body">--%>
<%--                    <div class="location">Taipei City, Taiwan</div>--%>
<%--                    <div class="headline">Photo by Jesus In Taiwan</div><a href="#">--%>
<%--                    <div class="link">View on Unsplash</div></a>--%>
<%--                </div>--%>
<%--            </div>--%>
        </div>
        <div id="next-catch"></div>
        <div id="prev-catch"></div>
    </div>

</div>

<script>
    let hero = document.getElementById('hero-slides');
    let menu = document.getElementById('menu');
    let slides = document.getElementById('slides');
    let next = [ 'next', 'next-catch' ].map(n => document.getElementById(n));
    let prev = [ 'prev', 'prev-catch' ].map(n => document.getElementById(n));
    let slideChildren = slides.children;
    let slideCount = slides.children.length;
    let currentlyDemoing = false;
    let currentPage = 0;
    let slidesPerPage = () => window.innerWidth > 1700 ? 4 : window.innerWidth > 1200 ? 3 : 2;
    let maxPageCount = () => slideCount / slidesPerPage() - 1;

    function goToPage(pageNumber = 0) {
        currentPage = Math.min(maxPageCount(), Math.max(0, pageNumber));
        console.log(currentPage);
        hero.style.setProperty('--page', currentPage);
    }

    function sleep(time) {
        return new Promise(res => setTimeout(res, time));
    }

    function hoverSlide(index) {
        index in slideChildren &&
        slideChildren[index].classList.add('hover');
    }

    function unhoverSlide(index) {
        index in slideChildren &&
        slideChildren[index].classList.remove('hover');
    }

    async function demo() {
        if(currentlyDemoing) {
            return;
        }
        currentlyDemoing = true;
        if(currentPage !== 0) {
            goToPage(0);
            await sleep(800);
        }
        let slides = slidesPerPage();
        let pageSeq_ = { 2: [ 1, 2, 1 ], 3: [ 1, 2, 1 / 3 ], 4: [ 1, 1, 0 ] };
        let pageSeq = pageSeq_[slides] || pageSeq_[4];
        let slideSeq_ = { 2: [ 2, 4, 3 ], 3: [ 3, 6, 2 ], 4: [ 3, 6, 2 ] };
        let slideSeq = slideSeq_[slides] || slideSeq_[2];
        await sleep(300);
        goToPage(pageSeq[0]);
        await sleep(500);
        hoverSlide(slideSeq[0]);
        await sleep(1200);
        goToPage(pageSeq[1]);
        unhoverSlide(slideSeq[0]);
        await sleep(500);
        hoverSlide(slideSeq[1]);
        await sleep(1200);
        goToPage(pageSeq[2]);
        unhoverSlide(slideSeq[1]);
        await sleep(300);
        hoverSlide(slideSeq[2]);
        await sleep(1600);
        goToPage(0);
        unhoverSlide(slideSeq[2]);
        currentlyDemoing = false;
    }

    next.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage + 1)));
    prev.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage - 1)));
    menu.addEventListener('click', demo);

    sleep(100).then(demo);

  </script>





</body>
</html>


